<template>
  <section class="inner-bottom">
    <section class="content clear">
      <section class="content-search bb">
        <h3>基本信息</h3>
        <div class="mb20">
          <span>姓名：</span><span>{{managePersonInfo.name}}</span>
          <span class="ml20">工号/学号：</span><span>{{managePersonInfo.sn}}</span>
        </div>
      </section>
      <section class="content-search bb">
        <h3>用户岗位</h3>
        <div class="mb20">
          <span>岗位名称：</span>
          <el-select v-model="sear.jobId" placeholder="请选择岗位" @change="resetSearchCondition" size="small">
            <el-option :key="index" v-for="(item,index) in  managerRoles" :label="item.name" :value="item.id"></el-option>
          </el-select>
          <span class="ml20">状态：</span><span>{{currentRole.valid===0?'冻结':'正常'}}</span>
        </div>
      </section>
      <section class="content-search">
        <h3>学生名单</h3>
        <div class="fl">
          学院 <el-select size="mini" v-model="sear.college" placeholder="请选择学院" @change="getMajorsAndGradeByCollege">
            <el-option v-for="item in colleges" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="fl ml20">
          专业 <el-select size="mini" v-model="sear.major" placeholder="请选择专业" @change="getGradesByMajor">
            <el-option v-for="item in majors" :key="item.id" :label="item.name" :value="item.id"></el-option>
          </el-select>
        </div>
        <div class="fl ml20">
          年级 <el-select size="mini" v-model="sear.grade" placeholder="请选择年级">
            <el-option v-for="(item,index) in grades" :key="index" :label="item" :value="item"></el-option>
          </el-select>
        </div>
        <div class="fl ml20">
          <el-input size="mini" v-model="sear.filterValue" placeholder="请输入学号或者姓名"></el-input>
        </div>
        <div class="fl ml20">
          <el-button size="mini" type="primary" @click="search">查询</el-button>
        </div>
      </section>
      <div class="content-search">
        <el-button size="mini" type="primary" @click="showAddRuleStudentDialog">新增管辖学生</el-button>
      </div>
      <section class="content-list">
        <el-table :data="tableData" stripe style="width: 100%">
          <el-table-column type="index" label="序号" width="180">
            <template slot-scope="scope"><span>{{scope.$index+(sear.pageNum - 1) * sear.pageSize + 1}} </span></template>
          </el-table-column>
          <el-table-column prop="clazz" label="管辖范围">
            <template slot-scope="scope"><span>{{scope.row | jurisdiction }} </span></template>
          </el-table-column>
          <el-table-column label="操作" width="120">
            <template slot-scope="scope">
              <el-button @click="deleteManageScope(scope.row.id)" class="text-error" type="text" size="mini">删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </section>
      <section class="content-page">
        <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="sear.pageNum" :page-sizes="[10, 15, 20, 30]" :page-size="sear.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="totalCount">
        </el-pagination>
      </section>

      <el-dialog title="新增管辖学生" :visible.sync="dialogAddRuleStudent" @open="getAddRoleColleges" @close="clearAddRuleStudent">
        <section class="content-search">
          <el-form>
            <el-form-item label="当前岗位：">
              <span>{{currentRole.name}}</span>
            </el-form-item>
            <el-form-item label="管辖范围：">
            </el-form-item>
            <section class="clear">
              <div class="fl">
                学院 <el-select size="mini" v-model="addRuleSelectCollege" placeholder="请选择学院" style="width:120px" @change="getAddRoleMajorsAndGradeByCollege">
                  <el-option :key="index" v-for="(item,index) in  addRuleColleges" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </div>
              <div class="fl ml20">
                专业 <el-select size="mini" v-model="addRuleSelectMajor" placeholder="请选择专业" style="width:120px" @change="getAddRoleGradesByMajor">
                  <el-option :key="index" v-for="(item,index) in  addRuleMajors" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </div>
              <div class="fl ml20">
                年级 <el-select size="mini" v-model="addRuleSelectGrade" placeholder="请选择年级" style="width:120px" @change="getAddRoleClassesByMajorAndGrade">
                  <el-option :key="index" v-for="(item,index) in  addRuleGrades" :label="item" :value="item"></el-option>
                </el-select>
              </div>
              <div class="fl ml20">
                班级 <el-select size="mini" v-model="addRuleSelectClazz" placeholder="请选择班级" style="width:120px" @change="getAddRoleStudentsByClass">
                  <el-option :key="index" v-for="(item,index) in  addRuleClazzs" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </div>
              <!-- <div class="fl ml20">
                学生 <el-select size="mini" v-model="addRuleSelectStudent" placeholder="请选择学生" style="width:120px">
                  <el-option :key="index" v-for="(item,index) in  addRuleStudents" :label="item.name" :value="item.id"></el-option>
                </el-select>
              </div> -->
            </section>
            <section class="clear">
              <div style="margin: 15px auto;">备注：新增管辖范围可以按集体新增（如整个学院，专业等）</div>
              <el-button size="small" type="primary" @click="addRuleItem">添加</el-button>
              <div placeholder="最多添加10个管辖范围" style="    min-height: 150px;
    border: 1px solid #c5c2c2;
    border-radius: 8px;
    margin: 10px auto;
    padding: 5px;">
                <span class="message" v-if="roleItems.length===0">最多添加10个管辖范围</span>
                <div :key="index" v-for="(item,index) in roleItems">{{(index+1)+ '、'}}{{ item | rulefilter}}</div>
              </div>
            </section>
          </el-form>
        </section>
        <span slot="footer" class="dialog-footer">
          <el-button @click="dialogAddRuleStudent = false">取 消</el-button>
          <el-button type="primary" @click="submitRule">保 存</el-button>
        </span>
      </el-dialog>

    </section>
  </section>
</template>

<script>
import { people } from '@/api/index'
export default {
  name: 'studentList',
  props: {
    managePersonId: {
      type: Number
    }
  },
  data () {
    return {
      totalCount: 0,
      dialogAddRuleStudent: false,
      sear: {
        jobId: undefined,
        clazz: '',
        college: '',
        filterValue: '',
        grade: '',
        major: '',
        managerId: undefined,
        orderByColumn: '',
        orderByType: '',
        pageNum: 1,
        pageSize: 10
      },
      managePersonInfo: {},
      options: [{
        value: '选项1',
        label: '黄金糕'
      }, {
        value: '选项2',
        label: '双皮奶'
      }, {
        value: '选项3',
        label: '蚵仔煎'
      }, {
        value: '选项4',
        label: '龙须面'
      }, {
        value: '选项5',
        label: '北京烤鸭'
      }],
      managerRoles: [],
      tableData: [],

      colleges: [],
      majors: [],
      grades: [],

      roleItems: [],
      addRuleColleges: [],
      addRuleMajors: [],
      addRuleGrades: [],
      addRuleClazzs: [],
      addRuleStudents: [],

      addRuleSelectCollege: undefined,
      addRuleSelectMajor: undefined,
      addRuleSelectGrade: undefined,
      addRuleSelectClazz: undefined,
      addRuleSelectStudent: undefined
    }
  },
  created () {
    this.getManagePersonDetail()
    this.getColleges()
  },
  computed: {
    currentRole: function () {
      if (this.managerRoles.length === 0) {
        return {
          id: null,
          name: null,
          valid: null
        }
      } else {
        return this.managerRoles.find((item) => {
          return item.id === this.sear.jobId
        })
      }
    }
  },
  methods: {
    getCollegeData () {
      return people()._getColleges().then((res) => {
        if (res.status) {
          return res
        } else {
          this.$message.error(res.message)
        }
      }).catch((err) => {
        this.$message.error(err)
      })
    },
    getMajorDataByCollege (collegeId) {
      return people()._getMajorsByCollege(collegeId).then((res) => {
        if (res.status) {
          return res
        } else {
          this.$message.error(res.message)
        }
      }).catch((err) => {
        this.$message.error(err)
      })
    },
    getGradesByCollege (collegeId) {
      return people()._getGradesByCollege(collegeId).then((res) => {
        if (res.status) {
          return res
        } else {
          this.$message.error(res.message)
        }
      }).catch((err) => {
        this.$message.error(err)
      })
    },
    getGradeDataByMajor (majorId) {
      return people()._getGradesByMajor(majorId).then((res) => {
        if (res.status) {
          return res
        } else {
          this.$message.error(res.message)
        }
      }).catch((err) => {
        this.$message.error(err)
      })
    },
    getClassDataByMajorAndGrade (majorId, grade) {
      return people()._getClassesByMajorAndGrade(majorId, grade).then((res) => {
        if (res.status) {
          return res
        } else {
          this.$message.error(res.message)
        }
      }).catch((err) => {
        this.$message.error(err)
      })
    },
    getStudentDataByClass (clazzId) {
      return people()._findByClassId({
        clazzId: clazzId,
        filterValue: '',
        orderByColumn: '',
        orderByType: '',
        pageNum: 1,
        pageSize: 1000
      }).then((res) => {
        if (res.status) {
          return res
        } else {
          this.$message.error(res.message)
        }
      }).catch((err) => {
        this.$message.error(err)
      })
    },
    getColleges () {
      this.getCollegeData().then((res) => {
        this.colleges = res.data
      })
    },
    getMajorsAndGradeByCollege (collegeId) {
      this.sear.major = ''
      this.sear.grade = ''
      this.getMajorDataByCollege(collegeId).then((res) => {
        this.majors = res.data
      })
      this.getGradesByCollege(collegeId).then((res) => {
        this.grades = res.data
      })
    },
    getGradesByMajor (majorId) {
      this.sear.grade = ''
      this.getGradeDataByMajor(majorId).then((res) => {
        this.grades = res.data
      })
    },
    getAddRoleColleges () {
      this.addRuleSelectMajor = undefined
      this.addRuleSelectGrade = undefined
      this.addRuleSelectClazz = undefined
      this.addRuleSelectStudent = undefined
      this.addRuleSelectCollege = undefined
      this.getCollegeData().then((res) => {
        this.addRuleColleges = res.data
      })
    },
    getAddRoleMajorsAndGradeByCollege (collegeId) {
      this.addRuleSelectMajor = undefined
      this.addRuleSelectGrade = undefined
      this.addRuleSelectClazz = undefined
      this.addRuleSelectStudent = undefined
      this.getMajorDataByCollege(collegeId).then((res) => {
        this.addRuleMajors = res.data
      })
      this.getGradesByCollege(collegeId).then((res) => {
        this.addRuleGrades = res.data
      })
    },
    getAddRoleGradesByMajor (majorId) {
      this.addRuleSelectGrade = undefined
      this.addRuleSelectClazz = undefined
      this.addRuleSelectStudent = undefined
      this.getGradeDataByMajor(majorId).then((res) => {
        this.addRuleGrades = res.data
      })
    },
    getAddRoleClassesByMajorAndGrade (grade) {
      this.addRuleSelectClazz = undefined
      this.addRuleSelectStudent = undefined
      if (this.addRuleSelectMajor) {
        this.getClassDataByMajorAndGrade(this.addRuleSelectMajor, grade).then((res) => {
          this.addRuleClazzs = res.data
        })
      }
    },
    getAddRoleStudentsByClass (clazzId) {
      this.addRuleStudents = undefined
      this.getStudentDataByClass(clazzId).then((res) => {
        this.addRuleStudents = res.data.pageData
      })
    },
    getManagePersonDetail () {
      return people()._getManagePersonDetail(this.managePersonId).then((res) => {
        if (res.status) {
          this.managePersonInfo = res.data
          this.sear.jobId = res.data.managerRoles[0].id
          this.sear.managerId = this.managePersonId
          this.managerRoles = res.data.managerRoles
          this.getDetailManagerScope()
        } else {
          this.$message.error(res.message)
        }
      }).catch((err) => {
        this.$message.error(err)
      })
    },
    getDetailManagerScope () {
      if (typeof this.sear.college === 'number') {
        this.sear.college = this.colleges.find((item) => {
          return item.id === this.sear.college
        }).name
      }

      if (typeof this.sear.major === 'number') {
        this.sear.major = this.majors.find((item) => {
          return item.id === this.sear.major
        }).name
      }

      return people()._getDetailManagerScope(this.sear).then((res) => {
        if (res.status) {
          this.tableData = res.data.pageData
          this.totalCount = res.data.totalCount
        } else {
          this.$message.error(res.message)
        }
      }).catch((err) => {
        this.$message.error(err)
      })
    },
    deleteManageScope (id) {
      this.$confirm('此操作将永久删除该条管辖范围, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        people()._deleteManagerScope(id).then((res) => {
          if (res.status) {
            this.$message.success('删除管辖范围成功')
            this.getDetailManagerScope()
          } else {
            this.$message.error(res.message)
          }
        }).catch((err) => {
          this.$message.error(err)
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    search () {
      this.sear.pageNum = 1
      this.getDetailManagerScope()
    },
    handleSizeChange (pageSize) {
      this.sear.pageSize = pageSize
      this.getDetailManagerScope()
    },
    handleCurrentChange (pageNum) {
      this.sear.pageNum = pageNum
      this.getDetailManagerScope()
    },
    showAddRuleStudentDialog () {
      this.dialogAddRuleStudent = !this.dialogAddRuleStudent
    },
    addRuleItem () {
      if (this.roleItems.length >= 10) {
        this.$message.warning('最多添加10条管辖范围！')
        return
      }
      if (!this.addRuleSelectCollege) {
        this.$message.warning('请选择管辖范围！')
        return
      }
      let currentSelectObj = {
        clazz: this.addRuleSelectClazz !== undefined ? this.addRuleClazzs.find((item) => { return item.id === this.addRuleSelectClazz }).name : null,
        clazzId: this.addRuleSelectClazz !== undefined ? this.addRuleSelectClazz : null,
        college: this.addRuleSelectCollege !== undefined ? this.addRuleColleges.find((item) => { return item.id === this.addRuleSelectCollege }).name : null,
        collegeId: this.addRuleSelectCollege !== undefined ? this.addRuleSelectCollege : null,
        grade: this.addRuleSelectGrade !== undefined ? this.addRuleSelectGrade : null,
        major: this.addRuleSelectMajor !== undefined ? this.addRuleMajors.find((item) => { return item.id === this.addRuleSelectMajor }).name : null,
        majorId: this.addRuleSelectMajor !== undefined ? this.addRuleSelectMajor : null,
        name: this.addRuleSelectStudent !== undefined ? this.addRuleStudents.find((item) => { return item.id === this.addRuleSelectStudent }).name : null,
        sn: this.addRuleSelectStudent !== undefined ? this.addRuleStudents.find((item) => { return item.id === this.addRuleSelectStudent }).sn : null,
        studentId: this.addRuleSelectStudent !== undefined ? this.addRuleSelectStudent : null
      }
      let isHasRepeat = this.roleItems.filter(item => {
        return JSON.stringify(item) === JSON.stringify(currentSelectObj)
      })
      if (isHasRepeat.length !== 0) {
        this.$message.warning('请勿重复添加！')
        return
      }
      this.roleItems.push(currentSelectObj)
    },
    submitRule () {
      people()._addManagerScope({
        managerId: this.managePersonId,
        jobId: this.sear.jobId,
        scopeDetails: this.roleItems
      }).then((res) => {
        if (res.status) {
          this.$message.success('新增管辖学生成功')
          this.dialogAddRuleStudent = false
          this.getDetailManagerScope()
        } else {
          this.$message.error(res.message)
        }
      }).catch((err) => {
        this.$message.error(err)
      })
    },
    clearAddRuleStudent () {
      this.roleItems = []
    },
    resetSearchCondition () {
      this.sear.college = ''
      this.sear.grade = ''
      this.sear.major = ''
      this.sear.filterValue = ''
    }
  },
  filters: {
    rulefilter: function (item) {
      let str = (item.sn === null ? '' : (item.sn + ' ')) + (item.name === null ? '' : (item.name + ' ')) + (item.college === null ? '' : (item.college + ' ')) + (item.major === null ? '' : (item.major + ' ')) + (item.grade === null ? '' : (item.grade + ' ')) + (item.clazz === null ? '' : (item.clazz + ' '))
      return str
    },
    jurisdiction: function (item) {
      let str = (item.sn ? item.sn : '') + ' ' + (item.name ? item.name : '') + ' ' + (item.college ? item.college : '') + ' ' + (item.major ? item.major : '') + ' ' + (item.grade ? item.grade : '') + ' ' + (item.clazz ? item.clazz : '') + ' (' + item.count + '人)'
      return str
    }
  }
}
</script>
<style lang="less" scoped>
h3 {
  margin-bottom: 10px;
}
</style>
